<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="descrption" content="" />
<title>贷款利率计算器</title>
<script src="../../../js/angular.js" charset="utf-8"></script>
<link rel="stylesheet" href="../../../layui/layui/css/layui.css" media="all" />
<script src="../../../layui/layui/layui.js" charset="utf-8"></script>
<script src="../../../layui/layui/jquery-3.2.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../layui/js/fy.js"></script>
</head>
<body>
	<div id="page_container" style="width: 100%">
		<!--左部  -->
		<fieldset class="layui-elem-field layui-field-title"
			style="margin-top: 30px;">
			<legend>贷款利率计算器</legend>
		</fieldset>
		<div ng-app="myApp" ng-controller="customersCtrl" align="center">
			<div><loading>查询中请稍后</loading> 
			<div style="float:left;width:35%">
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 130px;text-align: left;">贷款金额（元）:</label>
					<div class="layui-input-block">
						<input ng-model="dkje" id="je" lay-verify="title" autocomplete="off"
							class="layui-input" type="text" style="width: 80%">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 130px;text-align: left;">贷款期限（年）:</label>
					<div class="layui-input-block">
						<input ng-model="dkqx" lay-verify="title" autocomplete="off"
							class="layui-input" id="nx" type="text" style="width: 80%">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 130px;text-align: left;">还款方式:</label>
					<div class="layui-input-block">
						<select id="hkfs" ng-model="hkfsmd"
							 style="width:80%;height:35px;">
							<option value="1">等额本息</option>
							<option value="2">等额本金</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" ng-click="js()">计算</button>
						<button type="reset" id="cz" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 130px;text-align: left;">还款总额:</label>
					<div class="layui-input-block">
						<input name="title" lay-verify="title" ng-model="HKZE" autocomplete="off"
							class="layui-input" type="text"  readonly="readonly" style="width: 80%">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 130px;text-align: left;">利息总额:</label>
					<div class="layui-input-block">
						<input name="title" lay-verify="title" ng-model="LXZE" autocomplete="off"
							class="layui-input" type="text" readonly="readonly" style="width: 80%">
					</div>
				</div>
				<div>
				<br>
				贷款计算器计算的数据仅供参考!
				</div>
			</div>
			<!--右部  -->
			<div style="float:right;width:60%">
				<table class="layui-table">
					<tr align="center" style="background-color:#f1f1f1">
						<td>期次</td>
						<td>偿还本息</td>
						<td>偿还本金</td>
						<td>偿还利息</td>
					</tr>
					<tr align="center" ng-repeat="x in names">
						<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.QC}}</td>
						<td ng-if="$even">{{ x.QC }}</td>
						<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.CHBX}}</td>
						<td ng-if="$even">{{ x.CHBX}}</td>
						<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.CHBJ}}</td>
						<td ng-if="$even">{{ x.CHBJ }}</td>
						<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.CHLX}}</td>
						<td ng-if="$even">{{ x.CHLX }}</td>
					</tr>
				</table>
				<div class="layui-btn-group">
					<button class="layui-btn layui-btn-primary layui-btn-sm"
						ng-click="Sy()">首页</button>
					<button class="layui-btn layui-btn-primary layui-btn-sm"
						ng-click="Previous()">上一页</button>
					<button ng-repeat="page in pageList"
						class="layui-btn layui-btn-primary layui-btn-sm"
						ng-click="selectPage(page)">{{ page }}</button>
					<button class="layui-btn layui-btn-primary layui-btn-sm"
						ng-click="Next()">下一页</button>
					<button class="layui-btn layui-btn-primary layui-btn-sm"
						ng-click="Wy()">尾页</button>
					<button class="layui-btn layui-btn-primary layui-btn-sm ">{{selPage}}/{{pages}}</button>
				</div>
			</div>
		</div>
	</div>
</div>
	<script>
		layui.use('element', function() {
			var $ = layui.jquery, element = layui.element;
		});
	</script>
	<script type="text/javascript" src="../../../layui/lay/modules/layer.js"></script>
	<script type="text/javascript" src="../../../layui/layer.ext.js"></script>
	<script>
	  function getPath(){
			 return 'http://'+location.host;	
		      };
	   var a;
	   var app = angular.module('myApp', []);
	   	  app.directive('loading', function(){  
		        return {  
		            restrict: 'E',  
		            transclude: true,  
		            template: '<div ng-show="loading" class="loading" id="allDiv"  style="position:fixed; top:0px; left:0px; width:100%; height:100%; display:none; background-color:#000; opacity: 0.5; z-index:99999;">'  
		            +'<img alt="" src="../../../layui/layui/img/jz.gif" style="vertical-align: middle;width:30px; height:30px; position: absolute; top:50%; left:50%; margin-top: -50px; margin-left:-50px;"/>'
		            +'</div>',  
		            link: function (scope, element, attr) {  
		                scope.$watch('loading', function (val) {  
		                    if (val){  
		                        document.getElementById("allDiv").style.display = "block";  
		                    }else{  
		                        document.getElementById("allDiv").style.display = 'none';  
		  
		                    }  
		                });  
		            }  
		        };
		    });  
		    app.controller('customersCtrl', function($scope, $http) {
		    $scope.setLoading =function(){  
			    if($scope.loading ==undefined || $scope.loading ==false){  
			        $scope.loading=true;  
			    }else{  
			        $scope.loading=false;  
			    };
			};
                
                
                  $scope.js=function(){
                   var reg = new RegExp("^[0-9]*$");
		       		var obj=$("#nx").val();
		       		var obj1=$("#je").val();
		    		if(!reg.test(obj)){
		    		layer.alert('提示：贷款期限只能是整年!', {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								     ,btn: ['确认'] //按钮
								      ,icon: 5    // icon
								     ,yes:function(){
										window.location.href=window.location.href;
								     }
					});
				  }else if(!reg.test(obj1)){
		    		layer.alert('提示：贷款金额只能是数字!', {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								     ,btn: ['确认'] //按钮
								      ,icon: 5    // icon
								     ,yes:function(){
										window.location.href=window.location.href;
								     }
					});
                  
                  }else if($("#je").val()!="" && $("#je").val()!=null && $("#nx").val()!="" && $("#nx").val()!=null && $("#hkfs").val()!="" && $("#hkfs").val()!=null && $("#hkfs").val()!="? undefined:undefined ?"){   
	                  $scope.setLoading();
	                  $scope.params = {
	                     hkfs : $scope.hkfsmd,
	                     year: $scope.dkqx,
	                     invest:$scope.dkje
	                     				  };
				     $http({
						url : getPath() + "/wsyyt/DKJSQController/dkjsq",
						contentType : "text/html;charset=utf-8",
						method : 'post',
						params : $scope.params,
					}).then(function(res){
						 $scope.setLoading();
					     $scope.data = res.data;
					     if(res.data[0].msg==null){
									layer.msg("登陆失效请重新登陆");
													setTimeout(function () {
														window.top.location.href=res.data;
													}, 1500);
													return;
						}
					     a = res.data.CNT;
						 feny($scope.data);	
					     /**计算还款总额，利息总额  */
					     var HK=0.00;
					     for(var i=0;i<res.data.length;i++){
					        HK=res.data[i].CHBX*1 +HK*1; 
					     }
					     var numhk=HK.toFixed(3);
					     var LX=0.00;
					     for(var i=0;i<res.data.length;i++){
					        LX=LX*1+res.data[i].CHLX*1;
					     }
					     var numlx=LX.toFixed(3);
					     $scope.LXZE=numlx.substring(0,numlx.lastIndexOf('.')+3);
					     $scope.HKZE=Number($scope.dkje) + Number($scope.LXZE); 
				  });
			  }else{
			 	$scope.names="";
				$scope.selPage="";
				$scope.selectPage="";
				$scope.pages="";
				$scope.page="";
				$scope.pageList="";
				$scope.HKZE="";
				$scope.LXZE="";
			  	//layer.msg('提示：贷款金额、期限、还款方式不能为空',{icon: 5});
			  	layer.alert('提示：贷款金额、期限、还款方式不能为空', {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								     ,btn: ['确认'] //按钮
								      ,icon: 5    // icon
								     ,btn2:function(){
										
								     }});
			  	return null;	
			  }
		};
		});
	</script>
	<script type="text/javascript">
		$("#cz").click(function(){
			window.location.href=window.location.href;
		});
	</script>
</body>
</html>
